// 1.引入vue和vuex
import Vue from 'vue';
import Vuex from 'vuex';


// 2.使用vuex插件
Vue.use(Vuex);


// 3.实例化一个vuex仓库，并且暴露
// 4.给仓库传入配置(state mutations actions getters modules)

export default new Vuex.Store({
    state: {
        count: 0,
        num: 1
    },
    /* 
      更改 Vuex 的 store 中的状态的唯一的方法是提交mutation
      Vuex中的mutation 非常类似于事件：每个mutation都有一个字符串的 事件类型（type）和一个 回调函数（handler）
      mutation函数会接收 state 作为第一个参数
    */
    mutations: {
        increment(state) {
            state.count++
        },
        decrement(state) {
            state.count--
        },
        // 可以向store.commit 传入额外的参数，mutation的载荷（payload），在mutation方法中第二个参数接收
        incrementN(state, payload) {
            state.count += payload.n
        },
    },
    actions: {
        /* 
          actions中方法的任务1：执行异步操作   2：提交mutations更新state
          actions的方法接收一个阉割版的store作为参数，我们可以使用store上的commit方法提交mutation
          actions的方法接收的第二个参数是dispatch时候传递的参数
        */
        incrementWait(store) {
            setTimeout(() => {
                store.commit("increment")
            }, 2000);
        },
        incrementNWait(store, n) {
            setTimeout(() => {
                // 提交mutation的时候，需要遵守payload写法
                store.commit('incrementN', { n: n })
            }, 2000);
        }
    },
    getters: {}
})